<template>
  <view v-if="options">
    <u-navbar height="50" title="核销码" title-size="36" title-color="#333"></u-navbar>
    <view class="card dis-flex flex-y-center">
      <view @click="onCopy(options.verifyCode)">
        <text style="margin-right: 10rpx">劵码：{{ formatCode(options.verifyCode) }}</text>
        <u-icon name="/static/store/fz.png" size="30"></u-icon>
      </view>
      <view class="image">
        <u-image :src="options.qrcode" width="540rpx" height="540rpx"></u-image>
      </view>
    </view>
    <view class="to-home" @click="toPersonalCenter">返回个人中心</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: {
        verifyCode: '--',
        qrcode: ''
      }
    }
  },
  onLoad(options) {
    this.options = options
    if (options.qrcode) {
      uni.setStorageSync('verify_qrcode', options.qrcode)
    }
    this.options.qrcode = uni.getStorageSync('verify_qrcode')
  },
  methods: {
    formatCode(code) {
      if (!code) {
        return '--'
      }
      if (!code.match(/^\d+$/)) {
        return code
      }
      return code.replace(/\s/g, '').replace(/(\d{3})(?=\d)/g, '$1 ')
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    },
    toPersonalCenter() {
      uni.reLaunch({
        url: '/pages/ucenter/ucenter'
      })
    }
  }
}
</script>

<style lang="scss">
.card {
  width: 710rpx;
  height: 710rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx auto;
  font-size: 36rpx;
  color: #333333;
  line-height: 60rpx;
  padding: 20rpx;
  flex-flow: column;
}

.to-home {
  width: 710rpx;
  height: 96rpx;
  background: #10a28f;
  border-radius: 48rpx;
  margin: 80rpx auto 0 auto;
  line-height: 96rpx;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
}
</style>
